<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.添加视口标签 快捷方式：meta:vp -->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <!--2.设置网页渲染模式  快捷方式：meta:compat  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--3.把bootstrap 核心样式（压缩版）引入-->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        thead th{
            text-align: center;
        }
        .form-group label{
            line-height: 34px;
        }
    </style>
    <title>Document</title>
    <!--6.针对于IE9 以下浏览器做兼容性处理 快捷方式：cc:ie -->
    <!--[if lt IE9 ]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--
需求分析：
    1.一个学员信息的管理系统（显示列表信息）
    2.打开可以查看具体的学员信息( 模态框打开)
    3.可以在线修改信息
    4.信息的数据存储： 本地存储
    5.数据的使用格式： json
    6.数据存储的格式转换 json - > json 字符串
-->
<div class="container">
    <div class="page-header">
        <h2 class="text-center">课工场学员信息管理系统</h2>
    </div>
    <div class="row">
        <table class="table table-bordered table-striped text-center">
            <thead>
                <th>编号</th>
                <th>姓名</th>
                <th>专业</th>
                <th>操作</th>
            </thead>
            <tbody>
            </tbody>

        </table>
    </div>
</div>

<!--模态框部分-->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h3 class="modal-title">学员信息查看</h3>
                </div>
                <div class="modal-body">
                    <form action="">
                        <div class="form-group clearfix">
                            <label for="" class="control-label col-md-4 text-right">编号：</label>
                            <div class="col-md-6">
                                <input type="text" disabled class="form-control" name="number"/>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label for="" class="control-label col-md-4 text-right">姓名：</label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="name"/>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label for="" class="control-label col-md-4 text-right">专业：</label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="zy"/>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label for="" class="control-label col-md-4 text-right">备注：</label>
                            <div class="col-md-6">
                                <textarea name="text" id="" cols="30" class="form-control" rows="10"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary close-modal">关闭</button>
                    <button class="btn btn-success save">保存</button>
                </div>
            </div>
        </div>
    </div>
<!--4.把jQuery 引入-->
<script src="js/jquery-1.10.2.min.js"></script>
<!--5.把bootstrap 核心脚本文件（压缩版）引入-->
<script src="js/bootstrap.min.js"></script>
<script>
    //文档加载就绪
    $(function(){
    //给查看添加点击事件
      $("body").on("click",'.view',function(){
        //打开模态框
          var index = $(this).data("id");//获取点击元素的数据索引值
          $(".modal-title").html(data[index].name+" -学员信息维护");//修改模态框的标题
        //设置模态框对应显示的内容
          $(":text[name=number]").val(data[index].number);
          $(":text[name=name]").val(data[index].name);
          $(":text[name=zy]").val(data[index].zy);
          $(":text[name=text]").val(data[index].text);

          $("#myModal").modal('show');//显示模态框
      })
    //给关闭的按钮添加点击事件
        $(".close-modal").click(function(){
            //关闭模态框
            $("#myModal").modal('hide');
        })

        //模拟学员信息数据
        var data = [
            {
                "number":1,
                "name":"张三",
                "zy":"web前端",
                "text":null

            },
            {
                "number":2,
                "name":"李四",
                "zy":"UI设计",
                "text":null

            },
            {
                "number":3,
                "name":"王五",
                "zy":"大数据",
                "text":null

            },{
                "number":4,
                "name":"赵六",
                "zy":"VR",
                "text":null

            },
            {
                "number":5,
                "name":"王麻子",
                "zy":"AI人工智能",
                "text":null

            }

        ]

        //将学员数据，插入到网页表格中
        var htmlStr = ''; //定义一个生成html的字符串
        for(var i=0;i<data.length;i++){
            htmlStr+=' <tr> <td>'+data[i].number+'</td> <td>'+data[i].name+'</td> <td>'+data[i].zy+'</td> <td><a href="javascript:void(0)" class="btn btn-primary btn-xs view" data-id="'+i+'">查看</a>　<a href="javascript:void(0)" class="btn btn-danger btn-xs">删除</a></td> </tr>'
        }
        //将生成的html 插入到网页表格
        $(".table tbody").append(htmlStr);
    })
</script>
</body>
</html>